<template>
	<view class="table-container">
		<view class="header">
			<view class="fixed-header" >
				<view class="cell cell_header" style="min-width: 50px"></view>
				<view class="cell cell_header" style="min-width: 120px">运单号</view>
			</view>
			<view class="scrollable-header" >
				<view class="row" >
					<view class="cell cell_header" style="min-width: 100px">发货人</view>
					<view class="cell cell_header" style="min-width: 100px">发货公司</view>
					<view class="cell cell_header" style="min-width: 100px">收货人</view>
					<view class="cell cell_header" style="min-width: 100px">应收款</view>
					<view class="cell cell_header" style="min-width: 100px">件数</view>
					<view class="cell cell_header" style="min-width: 100px">货物名称</view>
					<view class="cell cell_header" style="min-width: 100px">发站</view>
					<view class="cell cell_header" style="min-width: 100px">到站</view>
					<view class="cell cell_header" style="min-width: 100px">开单日期</view>
					<view class="cell cell_header" style="min-width: 100px">委托单号</view>
				</view>
				
			</view>
		</view>
		<view class="body">
			<view class="fixed-column">
				<u-checkbox-group v-model="checkboxValue" @change="selectChange">
					<view class="row" v-for="(dataItem, index) in tableList" :key="index">
						<view class="cell cell_body" style="min-width: 50px">
							<u-checkbox :customStyle="{ marginTop: '8px' }" label="" label-value="orderNo"
								:name="dataItem.orderNo"></u-checkbox>
						</view>
						<view class="cell cell_body" style="min-width: 120px"> {{ dataItem.orderNo }}</view>
					</view>
				</u-checkbox-group>
			</view>
			<view class="scrollable-columns" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
				<view class="row" v-for="(dataItem, index) in tableList" :key="index">
					<view class="cell cell_body" style="min-width: 100px"> {{ dataItem.shipper }}</view>
					<view class="cell cell_body" style="min-width: 100px"> {{ dataItem.shipper }}</view>
					<view class="cell cell_body" style="min-width: 100px"> {{ dataItem.consignee }}</view>
					<view class="cell cell_body" style="min-width: 100px"> {{ dataItem.totalTfDue }}</view>
					<view class="cell cell_body" style="min-width: 100px"> {{ dataItem.itemQty }}</view>
					<view class="cell cell_body" style="min-width: 100px"> {{ dataItem.itemDesc }}</view>
					<view class="cell cell_body" style="min-width: 100px"> {{ dataItem.billDeptName }}</view>
					<view class="cell cell_body" style="min-width: 100px"> {{ dataItem.discDeptName }}</view>
					<view class="cell cell_body" style="min-width: 100px"> {{ dayjs(dataItem.orderDate).format('YYYY-MM-DD') }}
					</view>
					<view class="cell cell_body" style="min-width: 100px"> {{ dataItem.orderNo }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		watch,
		computed,
		ref
	} from 'vue';
	import dayjs from 'dayjs';
	const props = defineProps({
		dataList: {
			type: Array,
			default () {
				return () => [];
			}
		},
		// 已选数据列表
		modelValue: {
			type: Array,
			default () {
				return [];
			}
		}
	});
	const emits = defineEmits(['checkboxChange']);
	watch(
		() => props.modelValue,
		newVal => {
			checkboxValue.value = newVal;
		}
	);
	const tableList = computed(() => {
		return props.dataList;
	});

	const checkboxValue = ref([]);
	const selectChange = e => {
		emits('checkboxChange', e);
	};
	
	
	const scrollX = ref(0);
	let startX = 0;
	let startScrollX = 0;
	
	const onTouchStart = (e) => {
		startX = e.changedTouches[0].clientX;
		startScrollX = scrollX.value;
	};
	
	const onTouchMove = (e) => {
		const currentX = e.changedTouches[0].clientX;
		const deltaX = startX - currentX;
		scrollX.value = startScrollX + deltaX;
		scrollX.value = Math.max(0, Math.min(scrollX.value, 260)); // 根据实际列宽调整最大滑动值
		console.log('scrollx=',scrollX.value);
	};
	
	const onTouchEnd = () => {
		// 可添加惯性滑动等优化
	};

</script>

<style lang="scss" scoped>
	.table-container {
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		position: relative;
	}

	.header {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 35px;
		// position: sticky;
		// top: 95px;
		// z-index: 1;
		.fixed-header{
			// width: 170px;
			display: inline-flex;
			flex-direction: row;
			align-items: center;
		}
		.scrollable-header{
			flex: 1  1 auto;
			overflow: hidden;
		}
	}

	.body {
		// margin-top: 35px;
		// width: 100vw;
		display: flex;
		flex-direction: row;
		align-items: center;
		// overflow-x: auto;
	}

	.fixed-column {
		// width: 170px;
		/* Width of the fixed column */
		// position: sticky;
		// top: 0;
		// height: 100%;
	}

	.scrollable-columns {
		flex: 1 1 auto;
		overflow: hidden;
	}



	.row {
		display: inline-flex;
		flex-direction: row;
		align-items: center;
		box-sizing: border-box;
		height: 35px;
		overflow: auto;
	}

	.cell {
		height: 35px;
		line-height: 35px;
		text-align: start;
		padding-left: 10rpx;
		box-sizing: border-box;
	}

	.cell_header {
		background-color: #f4f4f4;
		border-right: 1rpx solid #ffffff;
		border-bottom: 1rpx solid #f0f2f5;
	}
	.cell_body{
		background-color: #ffffff;
		border-right: 1rpx solid #f0f2f5;
		border-bottom: 1rpx solid #f0f2f5;
	}
</style>